<template>
  <div class="zy-content">
    <div class="searchBox search-box-layout">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">{{ $t('fault.Code') }}</p>
            <div class="ipt">
              <Input clearable type="text" v-model="faultCode" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                     :maxlength="32"></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t('fault.Name') }}</p>
            <div class="ipt">
              <Input clearable type="text" v-model="faultName" :placeholder="`${$t('common.inputInfo')}`" class="inputBorder"
                     :maxlength="32"></Input>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button  class="search-btn" type="primary" @click="changeNum()">{{ $t('common.Query') }}</Button>
              <Button
                  class="reset-btn"
                  @click="changeNum()"
              >{{ $t('common.reset') }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t('common.listInformation') }}</span>
        <Button @click="addClickinfo" v-has="'faultBasicClassAdd'">{{ $t('common.New') }}</Button>
        <Button @click="exportTemplateClick" v-has="'faultBasicClassExport'">{{ $t('common.batchExport') }}</Button>
        <Button @click="importExcelShow" v-has="'faultBasicClassImport'">{{ $t('common.Import') }}</Button>
        <Button @click="exportTemplate" v-has="'faultBasicClassDown'">{{ $t('common.Download') }}</Button>
        <Button @click="deleteAll" v-has="'faultBasicClassDeleteAll'">{{ $t('common.batchDelete') }}</Button>
      </div>
      <div class="tableContent">
        <Table :columns="columns" :data="dataSource" @on-selection-change="onSelectChange">
          <template slot-scope="{ row }" slot="action">
          <span class="operationBtn" v-has="'faultBasicClassEdit'"
                @click="addClickinfo(row)"><i class="iconfont zy-common-bianji"></i>{{ $t('common.Edit') }}</span>
            <span class="operationBtn" v-has="'faultBasicClassDelete'"
                  @click="(deleteModal = true), (deleteIds = [row.id])"><i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}</span>
          </template>
        </Table>
      </div>
      <div class="pageWrap mt16">
<!--        <p class="left-title">-->
<!--          共{{ total }}条，已选中{{ deleteIds.length }}条-->
<!--        </p>-->
        <pageLeftTitle :total="total" :selected="deleteIds.length" />
        <Page :total="total" :page-size="pageSize" :page-size-opts="$variable.pageSizes" :current="pageNum"
              @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total />
      </div>
    </div>
    <Modal :mask-closable="false" v-model="addModal" :title="addtitle" class="modal-content-layout">
      <Form ref="form" class="formList" :model="formItem" label-position="top" :rules="rules">
        <FormItem :label="$t('fault.Code')" prop="faultCode"><!--故障分类代码  -->
          <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="formItem.faultCode"></Input>
        </FormItem>
        <FormItem :label="$t('fault.Name')" prop="faultName"><!--故障分类名称  -->
          <Input :placeholder="`${$t('common.inputInfo')}`" type="text" v-model="formItem.faultName"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="default" @click="addModal = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="handleSubmit('form')">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <Modal :mask-closable="false" v-model="deleteModal" :title="$t('common.Delete')" class="modal-title-layout">
<!--      <Row class="enableContent">-->
<!--        <Col span="24" class="enableContentInner">-->
<!--        <img width="95px" src="~images/event/del.png" alt="" />-->
<!--        </Col>-->
<!--        <Col span="24" class="enableTips">-->
<!--        <span>请确认是否删除?</span>-->
<!--        </Col>-->
<!--      </Row>-->
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>{{$t('common.confirmDelete')}}</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteModal = false">{{ $t('common.Cancle') }}</Button>
        <Button type="primary" @click="handleDelete">{{ $t('maintenance.Confirmed') }}</Button>
      </div>
    </Modal>
    <importExcelModal :importExcelStateF="importExcelState" v-if="importExcelState"
      @importExcelChange="importExcelChange"></importExcelModal>
  </div>
</template>

<script>
import fileDownload from "js-file-download";
import importExcelModal from "@/components/importExcel.vue";
export default {
  name: "faultClassify",
  components: { importExcelModal },
  data() {
    return {
      faultCode: "", // 故障分类代码
      faultName: "", // 故障分类名称
      total: 0, // 总数
      pageNum: 1, // 页数
      pageSize: 10, // 每页的个数
      pageSizeOption: [10, 20, 30],
      addModal: false, // 新增弹窗
      addtitle: "新增故障分类", // 新增/编辑 标题
      formItem: {
        // 新增编辑form
        faultName: "",
        faultCode: "",
      },
      rules: { // 校验规则
        faultCode: [
          { required: true, message: "故障分类代码必填", trigger: "blur" },
        ],
        faultName: [
          { required: true, message: "故障分类名称必填", trigger: "blur" },
        ],
      },
      deleteModal: false, // 删除弹窗
      deleteIds: [], // 删除Id
      importExcelState: false, // 导入弹窗
      columns: [
        {
          key: "selection",
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          //title: "故障分类代码",
          title: `${ this.$t('fault.Code') }`,
          key: "faultCategoryCode",
          align: "center",
        },
        {
          //title: "故障分类名称",
          title: `${ this.$t('fault.Name') }`,
          key: "faultCategoryName",
          align: "center",
        },
        {
         // title: "创建人",
         title: `${ this.$t('common.CreateBy') }`,
          key: "createBy",
          align: "center",
        },
        {
         // title: "创建时间",
         title: `${ this.$t('common.CreateTime') }`,
          key: "createTime",
          align: "center",
        },
        {
          title: `${this.$t('common.operation')}`,
          slot: "action",
          align: "center",
          width:200
        },
      ],
      dataSource: [],
    };
  },
  created() {
    this.searchList();
  },
  methods: {
    addClickinfo(row = {}) {
      if (row.id) {
        this.addtitle = `${this.$t('fault.EditClassification')}`
        this.formItem = {
          faultCode: row.faultCategoryCode,
          faultName: row.faultCategoryName,
          id: row.id,
        };
      } else {
        this.addtitle = `${this.$t('fault.NewClassification')}`
        this.formItem = {
          faultCode: "",
          faultName: "",
          id: null,
        };
      }
      this.addModal = true;
    },
    // 新增提交
    handleSubmit(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const params = {
            faultCode: this.formItem.faultCode,
            faultName: this.formItem.faultName,
          };
          if (this.formItem.id) params.id = this.formItem.id;
          this.axios({
            method: "post",
            url: `/dms/faultCategory/${this.formItem.id ? "updateCategory" : "saveCategory"
              }`,
            data: params,
          }).then((res) => {
            if (res.code === 200) {
              this.addModal = false;
              this.$Message.success(this.formItem.id ? "编辑成功" : "新建成功");
              this.changeNum();
            } else {
              this.$Message.warning({
                content: res.msg,
                duration: 6,
                closable: true,
              });
            }
          });
        }
      });
    },
    // 删除操作
    handleDelete() {
      this.axios({
        method: "post",
        url: "/dms/faultCategory/deleteByIds",
        data: { ids: this.deleteIds },
      }).then((res) => {
        if (res.code === 200) {
          this.deleteModal = false;
          this.$Message.success("删除成功");
          this.changeNum();
          this.deleteIds = []
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //查询列表
    searchList() {
      let params = {
        faultCode: this.faultCode,
        faultName: this.faultName,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      this.axios({
        method: "post",
        url: "/dms/faultCategory/list",
        data: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataSource = res.data.list;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    onSelectChange(selection) {
      this.deleteIds = selection.map((item) => item.id);
    },
    //下载模板
    exportTemplate() {
      const filName = "故障分类下载模板";
      this.axios({
        method: "get",
        url: "/dms/faultCategory/downloadTemplate",
        responseType: "blob",
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
    //导出
    exportTemplateClick() {
      let params = {
        faultCode: this.faultCode,
        faultName: this.faultName,
        ids: this.deleteIds,
      };
      const filName = "故障分类";
      this.axios({
        method: "post",
        url: "/dms/faultCategory/exportCategory",
        responseType: "blob",
        data: params,
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
    /*导入*/
    importExcelShow() {
      this.importExcelState = true;
    },
    importExcelChange(val) {
      this.importExcelState = false;
      if (val === "success") {
        this.$Message.success("导入成功");
        this.changeNum();
      }
    },
    // 批量删除
    deleteAll() {
      if (this.deleteIds.length == 0) {
        this.$Message.warning({
          content:`${ this.$t('common.deleteItems') }`,
          duration: 6,
          closable: true,
        });
        return;
      } else {
        this.deleteModal = true;
      }
    },
  },
};
</script>

<style scoped lang="scss">
</style>
